<template>
	<view class="page">
		<view class="logo">
			<image :src="loginImg"></image>
		</view>
		<view class="title">
			<view>登录</view>
		</view>
		<view class="login-from">
			<view class="input-box">
				<uni-icons class="input-icon" type="person-filled" size="26"></uni-icons>
				<input v-model="inputForm.username" class="login-input" placeholder="用户名" />
			</view>
			<view class="input-box">
				<uni-icons class="input-icon" type="locked-filled" size="26"></uni-icons>
				<input type="password" v-model="inputForm.password" class="login-input" placeholder="密码" />
			</view>
			<!-- 验证码 存在 更换不同手机 样式显示不同 问题  -->
			<view class="input-box" style="display: flex; gap: 24rpx; align-items: center;">
				<uni-icons class="input-icon" type="paperplane-filled" size="26"></uni-icons>
				<input  type="password" v-model="inputForm.code" class="login-input-code" placeholder="验证码" />
				<u--image class="input-img-code"  :showLoading="true" :src="captchaImg" width="140px" height="40px" @click="getCaptcha"></u--image>
			</view>
			<picker :range="netConfigList" range-key="name" @change="onPickerChange">
				<view class="input-box">
					<uni-icons class="input-icon" type="pyq" size="26"></uni-icons>
					<view class="login-input view-input"> </view>
					<input class="login-input" v-model="selectedNet" placeholder="选择网络" />
				</view>
			</picker>
			<button class="login-btn" @click="bindLogin">登录</button>
		</view>
		<view class="fot">
			<text @click="editServiceIp">新增服务器地址</text>
		</view>
		<uni-popup
			ref="popup"
			type="bottom"
			background-color="#fff"
		>
			<view class="login-popup">
				<input v-model="newApiUrl" class="ip-ipnut" placeholder="请输入ip地址" />
				<button class="login-btn" @click="editIpConfig">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import * as $auth from "@/common/auth.js"
	import loginService from "../../api/auth/loginService.js";
	import userService from "../../api/sys/userService.js";
	import fabricService from "../../api/auth/fabricService";
	import BASE_URL from './../../config.js'
	export default {
		data() {
			return {
				captchaImg: '',
				newApiUrl: '',
				netConfigList: [],
				selectedNet: null,
				selectedIndex: 0,
				allUrl: '',
				inputForm: {
					username: '',
					password: '',
					code: '',
					uuid: ''
				},
				loginImg: ""
			}
		},
		onShow () {
			console.log(BASE_URL.staticUrl);
			this.loginImg = BASE_URL.staticUrl + '/twy.png';
			let netConfigString = uni.getStorageSync('netConfigList')
			if (netConfigString) {
				this.netConfigList = netConfigString
			}
			// #ifdef MP-WEIXIN
			const net_config = uni.getStorageSync('net_config');
			if (net_config) {
				const { domain, selectedNet, url } = JSON.parse(net_config);
				this.selectedNet = selectedNet;
				BASE_URL.apiUrl = domain;
				this.allUrl = url;
				$auth.setIpConfig(BASE_URL.apiUrl);
			}
			// #endif	
		},
		created() {
			this.getCaptcha()
		},
		methods: {
			// 登录
			bindLogin() {
				// if (this.selectedNet === null) {
				// 	uni.showToast({
				// 		title: "请选择网络！",
				// 		duration: 2000,
				// 		icon: "error"
				// 	});
				// 	return false
				// }
				if (this.inputForm.username === '') {
					uni.showToast({
						title: "请输入用户名",
						duration: 2000,
						icon: "error"
					});
					return false
				}
				if (this.inputForm.password === '') {
					uni.showToast({
						title: "请输入密码",
						duration: 2000,
						icon: "error"
					});
					return false
				}
				uni.showLoading({
					title: '登录中...'
				});
				loginService.login(this.inputForm).then((data) => {
					uni.setStorageSync("token", data.token);
					// 加载菜单
					fabricService.getMenu().then(res => {
						uni.setStorageSync("menu", res);
					});

					// 加载用户信息
					userService.info().then(async (data) => {
						uni.setStorageSync("userInfo", data.user);
						const { id, name } = data.user;
		
						// #ifdef MP-WEIXIN
						const openid = uni.getStorageSync('openid');
						const saveWXData = {
							openid,
							domain: BASE_URL.apiUrl,
							userid: id,
							name,
							url: this.allUrl,
						};
						await userService.saveWX(saveWXData);
						uni.setStorageSync("net_config", JSON.stringify({...saveWXData, selectedNet: this.selectedNet}));
						// #endif	

						uni.hideLoading();
						uni.reLaunch({
							url: '/pages/index/index',
						});
					})
				}).catch(e => {
					console.log(e);
					
					uni.hideLoading()
				})
			},
			editServiceIp() {
				this.$refs.popup.open('bottom');
			},
			onPickerChange(e) {
				console.log(e);
				
				// 获取选择的索引
				this.selectedIndex = e.detail.value;
				// 通过索引获取对应的城市对象
				this.selectedNet = this.netConfigList[this.selectedIndex].name;
				BASE_URL.apiUrl = this.netConfigList[this.selectedIndex].domain;
				this.allUrl = this.netConfigList[this.selectedIndex].url;
				$auth.setIpConfig(BASE_URL.apiUrl);
			},
			editIpConfig() {
				uni.request({
					url: `https://${this.newApiUrl}/api/app/sys/tenant/getTenantNameByDomain`,
					method: "get",
					data: {
						domain: this.newApiUrl
					},
					success: res => {
						if (res.data === "没找到该域名！") {
							uni.showToast({
								title: "没找到该域名！",
								duration: 2000,
								icon: "error"
							});
						} else {
							let netConfig;
							// #ifdef MP-WEIXIN
								console.log('微信环境用https');
								netConfig = {
									url: `https://${this.newApiUrl}/api/app`,
									name: res.data,
									domain: this.newApiUrl
								}

							// #endif
							// 判断netConfig对象是否不为空
							if(!netConfig){
								netConfig = {
									url: `http://${this.newApiUrl}/api/app`,
									name: res.data,
									domain: this.newApiUrl
								}
							}
							console.log(2);
							
							const netConfigList = uni.getStorageSync("netConfigList") || [];
							netConfigList.push(netConfig)
							uni.setStorage({
								key: 'netConfigList',
								data: netConfigList
							})
							uni.showToast({
								title: "新增成功",
								duration: 2000,
								icon: "success"
							});
							this.$refs.popup.close();
							this.netConfigList = netConfigList;
							this.newApiUrl = "";
						}
					},
					fail: (res) => {
						console.log(res);
						
						uni.showToast({
							title: "没找到该域名！",
							duration: 2000,
							icon: "error"
						});
					},
				});
				
				// BASE_URL.apiUrl = this.newApiUrl;
				// $auth.setIpConfig(BASE_URL.apiUrl);
				// uni.showToast({
				// 	title: "设置成功",
				// 	duration: 2000,
				// 	icon: "success"
				// });
				// this.$refs.popup.close();
			},
			// 获取验证码
			getCaptcha () {
				loginService.getCode().then((data) => {
					this.captchaImg = 'data:image/gif;base64,' + data.codeImg
					this.inputForm.uuid = data.uuid
				})
			},
			handClickNet() {
				uni.navigateTo({
					url: '/pages/login/settingNet',
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	height: 100vh;
	display: flex;
	flex-direction: column;
	// justify-content: center;
	align-items: center;
}
.title {
	width: 580rpx;
	text-align: left;
	color: rgb(17, 17, 17);
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 40rpx;
}
.login-from {
	width: 580rpx;
	.input-box {
		position: relative;
		.input-icon {
			position: absolute;
			top: 24rpx;
			left: 20rpx;
		}
		.input-icon-right {
			position: absolute;
			top: 24rpx;
			right: 20rpx;
		}
		.view-input {
			position: absolute;
			z-index: 10;
			opacity: 0;
		}
	}
	.login-input-code{
		width: 300rpx;
		height: 100rpx;
		background-color: rgb(245, 245, 245);
		border-radius: 10rpx;
		padding: 0 20rpx;
		padding-left: 100rpx;
		margin-bottom: 20rpx;
	}
	.input-img-code{
		position: absolute;
		top: 10rpx;
		right: 0rpx;
		z-index: 10;
	}
	.login-input {
		width: 580rpx;
		height: 100rpx;
		background-color: rgb(245, 245, 245);
		border-radius: 10rpx;
		padding: 0 20rpx;
		padding-left: 100rpx;
		margin-bottom: 20rpx;
	}
	.login-btn {
		margin-top: 20rpx;
		width: 580rpx;
		height: 80rpx;
		background: rgb(17, 17, 17);
		border-radius: 10rpx;
		color: white;
		line-height: 80rpx;
		font-size: 24rpx
	}
}
.logo {
	width: 750rpx;
	height: 220rpx;
	margin: 120px auto 20rpx;
	image {
		width: 100%;
		height: 100%;
	}
	.ci {
		width: 120rpx;
		height: 120rpx;
		border-radius: 120rpx;
		background-color: rgb(17, 17, 17);
		margin-bottom: 20rpx;
		color: white;
		font-size: 50px;
		text-align: center;
		line-height: 120rpx;
	}
}
.fot {
	width: 100vw;
	height: 26px;
	text-align: center;
	font-size: 28rpx;
	font-weight: 500;
	color: #8E8E8E;
	margin-top: 20px;
	position: fixed;
	bottom: 30rpx;
}
.login-form {
	padding-left: 100rpx;
	padding-right: 30rpx;
}
.ip-ipnut {
	width: 650rpx;
	height: 80rpx;
	border: 1px solid rgb(245, 245, 245);
	padding: 0 20rpx;
	margin-bottom: 20rpx;
}
.login-popup {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	height: 110px;
	margin: 0 5px;
	background-color: white;
	padding: 10px 0;
	button {
		margin-top: 10px;
		width: 690rpx;
		height: 80rpx;
		background: rgb(17, 17, 17);
		border-radius: 10rpx;
		color: white;
		line-height: 80rpx;
		font-size: 24rpx
	}
}
</style>